@charset "UTF-8";

// Flex 布局
// ----------------------------------------------------------------------------

// 规定主轴的方向（即项目的排列方向）
@mixin flex-direction($direction: row) {
  // row | row-reverse | column | column-reverse
  @include prefixes(flex-direction, $direction, webkit ms spec);
}

// 规定如果一条轴线排不下，如何换行
@mixin flex-wrap($wrap: nowrap) {
  // nowrap | wrap | wrap-reverse
  // （默认）：不换行 | 换行，第一行在上方 | 换行，第一行在下方
  @include prefixes(flex-wrap, $wrap, webkit ms spec);
}

// 规定了项目在主轴上的对齐方式
@mixin justify-content($direction: flex-start) {
  // flex-start | flex-end | center | space-between | space-around
  // 左对齐 | 右对齐 | 居中 | 两端对齐，项目之间的间隔都相等 | 每个项目两侧的间隔相等
  @include prefixes(justify-content, $direction, webkit ms spec);
}

// 规定项目在交叉轴上如何对齐
@mixin align-items($direction: stretch（默认值）) {
  // flex-start | flex-end | center | baseline | stretch（默认值）
  // 起点对齐 | 终点对齐 | 中点对齐 | 项目的第一行文字的基线对齐 | 如果项目未设置高度或设为auto，将占满整个容器的高度
  @include prefixes(align-items, $direction, webkit ms spec);
}

// 规定了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
@mixin align-content($direction: stretch) {
  // flex-start | flex-end | center | space-between | space-around | stretch
  // 起点对齐 | 终点对齐 | 中点对齐 | 两端对齐，轴线之间的间隔平均分布 | 轴线两侧的间隔都相等 | 轴线占满整个交叉轴
  @include prefixes(align-content, $direction, webkit ms spec);
}

// 用于设置或检索弹性盒的扩展比率
@mixin flex-grow($num: 0) {
  // number | nitial | inherit
  @include prefixes(flex-grow, $num, webkit ms spec);
}
